<template>
	<view class="poonts_box">
		<view class="remaining">
			<view class="title flex_ac">
				<image src="@/static/images/icon/points.svg"></image>
				<text>剩余积分</text>
			</view>
			<view class="number">50</view>
			<view class="tips flex_ac_js">
				<view class="title1">积分是什么？如何使用和获得积分?</view>
				<view class="title2 flex_ac">
					<text>查看攻略</text>
					<image src="@/static/images/icon/right_active.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="details">
			<view class="title">积分明细</view>
			<view class="details_box">
				<view class="details_item flex_ac_js" v-for="item in detailsList" :key="item.id">
					<view class="titles">
						<view class="title1">{{ item.title }}</view>
						<view class="title2">{{ item.time }}</view>
					</view>
					<view class="number" :style="{'color': item.isadd ? '#007aff' : '#dd524d'}">{{ item.isadd ? '+' : '-' }} {{ item.number }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailsList: [
					{
						id: '1',
						title: '每日首组单词学习完成',
						time: '2024年12月01日 18:08',
						number: '20',
						isadd: true
					},
					{
						id: '2',
						title: '签到',
						time: '2024年12月01日 18:01',
						number: '20',
						isadd: true
					},
					{
						id: '3',
						title: '兑换',
						time: '2024年12月01日 13:01',
						number: '25',
						isadd: false
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.poonts_box {
	height: 100vh;
	padding: 30rpx;
	background-color: #f5f5f5;
	
	.remaining {
		padding: 30rpx;
		background-color: $uni-bg-color;
		border-radius: 16rpx;
		
		.title {
			color: $uni-text-color;
			
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
		
		.number {
			margin: 40rpx 0;
			text-align: center;
			font-size: 56rpx;
			font-weight: bold;
		}
		
		.tips {
			font-size: 28rpx;
			
			.title1 {
				color: $uni-text-color-disable;
			}
			
			.title2 {
				color: $uni-text-color-primary;
				
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.details {
		margin-top: 50rpx;
		
		.title {
			font-weight: bold;
			font-size: 36rpx;
			color: $uni-text-color;
		}
		
		.details_box {
			margin-top: 20rpx;
			
			.details_item {
				padding: 20rpx 0;
				border-bottom: 2rpx solid $uni-border-bottom-color;
				
				.titles {
					.title1 {
						color: $uni-text-color;
						font-weight: 600;
						font-size: 28rpx;
					}
					
					.title2 {
						color: $uni-text-color-grey;
						font-size: 24rpx;
						margin-top: 16rpx;
					}
				}
				
				.number {
					font-weight: 600;
					font-size: 32rpx;
				}
			}
		}
	}
}
</style>
